<template>
  <div>
  <el-container class="home-container">
  <!-- top -->
      <el-header style="height: 60px;background-color: #000000;">
        <div>
          <span style="color: #ffffff;font-weight: bold;">南欧汽配之家</span>
        </div>
        <el-row>
          <i class="el-icon-question" style="font-size: 30px;padding-right: 20px;" @click="dialogVisible = true"></i>
          <el-button type="danger" round style="text-align: center;">退出登录</el-button>
        </el-row>
      </el-header>

  <!-- 导航栏 -->
      <div>
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#303133"
            text-color="#fff"
            active-text-color="#FFE100"
            style="padding-left: 500px;background-color: #303133;"
            >
             <el-menu-item index="1" style="margin-right: 60px;font-size: 18px;" @click="tiaozhuan1"><i class="el-icon-s-home"></i>首页</el-menu-item>
             <el-menu-item index="2" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan2"><i class="el-icon-s-shop" ></i>购物中心</el-menu-item>
             <el-menu-item index="3" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan3"><i class="el-icon-s-opportunity"></i>车型查询</el-menu-item>
             <el-menu-item index="4" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan4"><i class="el-icon-s-claim"></i>关于我们</a></el-menu-item>
             <el-menu-item index="5" style="margin-right: 60px;font-size: 18px;"  @click="tiaozhuan5"><i class="el-icon-user-solid"></i>个人中心</a></el-menu-item>
             </el-menu>
      </div>
      <!-- 定义头标签 -->

	<div class="goods_detail_con clearfix" style="margin-top: 20px;">
		<div class="goods_detail_pic fl" style="height: 500px;"><img :src="imgUrl+good.images" style="width: 400px;"></div>
		<div class="goods_detail_list fr">
			<h3 style="font-weight: bold;margin-top: 20px;">{{good.title}}</h3>
			<p v-text="good.sellPoint" style="margin-top: 10px;font-size: 15px;"></p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em v-text="good.price/100"></em></span>
        <span style="padding-left: 50px;font-size: 20px;">库  存：</span>
				<span style="padding-left: 10px;font-size: 20px;" v-text="good.num"></span>
			</div>

			<div class="goods_num clearfix">
				<div class="num_name fl" style="font-size: 20px;">数 量：</div>
				<!-- <div class="num_add fl"> -->
					<!-- <input type="text" class="num_show fl" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a> -->
          <template>
            <el-input-number v-model="num" @change="this.handleChange" :min="1" :max="50" label="描述文字"></el-input-number>
          </template>
				<!-- </div> -->
			</div>
			<div class="total" style="font-size: 20px;">总价：{{good.price/100*num}} </em></div>
			<div class="operate_btn">
				<!-- <a href="javascript:;" class="buy_btn">立即购买</a> -->
        <el-button type="primary" round style="margin-left: 20px;width: 150px;">立即购买</el-button>
        <el-button type="warning" round style="margin-left: 20px;width: 150px;" @click="setShopCar(good.id)">加入购物车</el-button>
				<!-- <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a> -->
        <el-button v-if="tf" type="danger" title="收藏" icon="el-icon-star-off" @click="dianji()" circle style="width: 120px;background-color: #CECECE; margin-left: 20px;">收藏</el-button>
        <el-button v-else type="danger" icon="el-icon-star-off" @click="dianji()" circle style="width: 120px background-color: #FF6700; margin-left: 20px;">已收藏</el-button>
      </div>
		</div>
	</div>

	<div class="main_wrap clearfix" style="margin-top: 150px;">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3 style="font-size: 16px;font-weight: bold;">相关推荐</h3>
				<ul>
					<li>
						<a href="#"><img :src="imgUrl+'/2021/12/08/92bae529966e4cdc9ba804c645319db5.jpg'"></a>
						<h4 style="font-size: 15px;"><a href="#">润滑油汽机油</a></h4>
						<div class="prize">￥3.90</div>
					</li>
					<li>
						<a href="#"><img :src="imgUrl+'/2021/12/08/92bae529966e4cdc9ba804c645319db5.jpg'"></a>
						<h4 style="font-size: 15px;"><a href="#">润滑油汽机油</a></h4>
						<div class="prize">￥3.90</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active" style="font-size: 15px;">商品介绍</li>
				<li style="font-size: 15px;">评论</li>
			</ul>

			<div class="tab_content">
				<dl>
					<dt style="font-size: 25px;margin-top: 20px;margin-left: 20px;">商品详情：</dt>
            <p v-if="goodDesc!=null" v-html="goodDesc.itemDesc"></p>
					<dd style="font-size: 18px;margin-top: 10px;font-family: '黑体';
                    margin: 25px;">美国RALLYE全合成汽油发动机油，机油行驶每百公里会有明显节省，属于节能环保型油品，保持发动机清洁 “油泥和积碳的防护”，SN plus级别的5W-50产品拥有API认证的环保节油标示，含硫量降低更能有效减少对发动机的腐蚀，排放更为环保，满足欧V发动机环保排放标准。更加延长发动机寿命，满足各种涡轮增压发动机的苛刻要求。 </dd>
				</dl>
			</div>
		</div>
	</div>
    <TheHeader></TheHeader>
    </el-container>
    </div>
</template>

<script>
import TheHeader from '../the/TheFooter.vue'
import TheFooter from '../the/TheHeader.vue'

export default {
  data () {
    return {
      num: 1,
      activeIndex2: '2',
      // 左侧菜单数据
      menuList: [],
      goodsList: [],
      shoucangitem: [],
      // good:'',
      good: {

      },
      soucangItem:{
         goodsId:'',
         userName:null
      },
      carshopping:{
        goodsId:'',
        count:'',
        userName:null
      },
      // 富文本信息
      goodDesc: '',
      tf:'',
      mrtf:'',
      goodId: '',
      caidan: null,
      imgUrl: '../images',
      price: '',
      queryItemInfo: {
        id: '',
        query: '', // 定义查询参数,与输入的内容进行双向绑定
        pageNum: 1,
        pageSize: 20
      },
      menuIcon: {
        1: 'iconfont iconuser',
        9: 'iconfont iconshangpin',
        27: 'iconfont iconicon--copy',
        35: 'iconfont iconquanxian',
        10: 'iconfont iconziyuan',
        11: 'iconfont iconquanxian'
      },
      item: [
        {
          name: '1',
          url: require('../../assets/img/9.jpg')
        },
        {
          name: '2',
          url: require('../../assets/images/2.jpg')
        },
        {
          name: '3',
          url: require('../../assets/image_index/banner_1.jpg')
        },
        {
          name: '4',
          url: require('../../assets/image_index/banner_2.jpg')
        }
      ],
      // 定义是否折叠
      isCollapse: false,
      // 是否展现折叠动态效果
      isCollapseTransition: false,
      // 定义默认高亮
      defaultActive: ''
    }
  },
  // 初始化函数
  created () {
    this.carshopping.userName = sessionStorage.getItem('username')
    if(this.carshopping.userName == null){
      this.$message.success("亲！请先登录哦")
      this.tiaozhuan6()
      return
    }


     // 动态获取左侧菜单信息
    this.goodId = sessionStorage.getItem('goodId')
    /* window.eventBus.$on('goodId',(goodId) =>{
         this.goodId = goodId
          }) */

    //收藏
    this.shoucang(this.goodId,this.carshopping.userName)

    this.getMenuList()
    this.getgood()
    // 设定模式选中按钮
    // this.defaultActive = window.sessionStorage.getItem("activeMenu")
  },
  destroyed() {
    if(this.mrtf != this.tf){
      this.sc()
    }
  },
  components: {
    TheHeader,
    TheFooter
  },
  methods: {
    dialogVisible(){
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      this.$router.push('/login')
    },

    dianji(){
      if(this.tf == false){
        this.tf = true
        return
      }
      if(this.tf == true){
        this.tf = false
        return
      }

    },
    async shoucang(id,username){
      //要使用这个对象的时候先将对象字符串取出来，然后在用JSON.parse()这个方法将字符串转化成json对象就可以
      /* this.shoucangitem = JSON.parse(sessionStorage.getItem('shoucangitem')) */
      const {
         data: result
       } = await this.$http.get('/favorites/getlist?username=' + username)
       if (result.status !== 200) return this.$message.error('获取收藏信息失败!!')
      //sessionStorage存储对象的话必须先用JSON.stringify()方法将对象转化成一个对象字符串，然后才能进行存储。
       /* this.shoucangitem = JSON.stringify(result.data)
       window.sessionStorage.setItem("shoucangitem",this.shoucangitem) */
       this.shoucangitem = result.data
      if(this.shoucangitem.length == 0){
        this.tf = true
        this.mrtf = true
        return
      }
      for (var i = 0; i < this.shoucangitem.length; i++) {
        if(this.shoucangitem[i].id == id){
          this.tf = false
          this.mrtf = false
        }else{
          this.tf = true
          this.mrtf = true
        }
      }
    },
    async sc(){
      const { data: result } = await this.$http.get(`/favorites/setsc/${this.goodId}/${this.tf}/${this.carshopping.userName}`)
      if (result.status !== 200) return this.$message.error('收藏失败')
      //this.$message.success("收藏成功")
    },

    async setShopCar(id){
      this.carshopping.goodsId = id
      this.carshopping.count = this.num
      const { data: result } = await this.$http.get('/shopcar/setShopCar',{
          params: this.carshopping
        })
      if (result.status !== 200) return this.$message.error('购物车加入失败')
      this.$message.success("加入购物车成功")
    },
    handleChange (value) {
      console.log(value)
    },
    // 点击获取菜单
    huoqucaidan (name, id) {
      this.caidan = name
      this.queryItemInfo.id = id
    },
    async getMenuList () {
      const { data: result } = await this.$http.get('/shop/getShopList')
      if (result.status !== 200) return this.$message.error('菜单查询失败')
      this.menuList = result.data
      console.log(result.data)
      console.log('************' + this.price)
    },
    async getgood () {
      const { data: result } = await this.$http.get('/goods/getGood/' + this.goodId)
      if (result.status !== 200) return this.$message.error('图片加载失败')
      console.log('aaaaa')
      console.log(result)
      this.price = result.data[0].price
      this.good = result.data[0]
      this.goodDesc = result.data[1]

    },

    tiaozhuan1 () {
      this.$router.push('/index')
    },
    tiaozhuan2 () {
      this.$router.push('/shopping')
    },
    tiaozhuan3 () {
      this.$router.push('/car')
    },
    tiaozhuan4 () {
      this.$router.push('/about')
    },
    tiaozhuan5 () {
      this.$router.push('/usernew')
    },
    tiaozhuan6(){
      this.$router.push('/login')
    },
    /* tiaozhuan6(){
           this.$router.push("/shopping")
      }, */

    logout () {
      // 1.删除session中的数据
      window.sessionStorage.clear()
      // 2.用户访问登录页面
      // this.$router.push('/login')
    },
    // 设定左侧折叠展开效果
    collspseClick () {
      this.isCollapse = !this.isCollapse
    },
    defaultActiveMenu (activeMenu) {
      // 为了实现返回之后的选中效果,应该将数据保存到第三方中sessionStory
      window.sessionStorage.setItem('activeMenu', activeMenu)
      this.defaultActive = activeMenu
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../assets/css/main.css";
  @import "../../assets/css/reset.css";
   .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  .el-header {
    background-color: rgb(43,42,50);
    display: flex; //灵活的盒子容器
    justify-content: space-between; //左右对齐
    align-items: center; //文本元素居中对齐
    color: #FFFFFF; //设定字体颜色
    padding-left: 1px;
    >div {
      display: flex;
      align-items: center;
      span {
        margin-left: 15px;
        font-size: 25px; //设定字体高度
      }
    }
  }
  .el-aside {
    .el-menu {
      border-right: none;
    }
  }

  .el-main {
    background-color: #EEEEEE;
    background-image: url('../../assets/img/2.png') ;
  }

  .home-container {
    width: 100%;
  }

  .iconfont {
    margin-right: 8px;
  }

  //定义折叠项
  .leftCollapse {
  }

  .touxiang_box {
            height: 15px;
            width: 15px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 5px #ddd;
            position: absolute;
            left: 87%;
            background-color:#ddd ;
            img{
                width: 100%;
                height: 100%;
                border-radius: 100%;
                padding: auto;
            }
  }
</style>
